
<template>
    <div>
        <Table :ref="refs" :columns="columnsList" :data="thisTableData" ></Table>
    </div>
</template>

<script>
import delBtn from './component/access-delete-button.vue';
import modifyBtn from './component/access-modify-button.vue';

const detailBtn = (vm, h, currentRow, index) => {
  return h('Tooltip', {
    props: {
      placement:'top',
      content:'详细信息'
    }
  },[h('Button',{
    props: {
      size: 'small',
      icon: 'qr-scanner',
      type: 'text'
    },
    on: {
      click: () => {
        vm.$router.push({
          name:'customer_company-mgt-detail',
          params:{id:currentRow.customer_id}
        })
      }
    }
  })])
}

const editBtn = (vm, h, currentRow, index) => {
  return h('Tooltip', {
    props:{
      placement:'top',
      content:'修改'
    }
  },[h(modifyBtn,{
    on:{
      modifyClick:() => {
        console.info('modifyClick')
      }
    }
  })])
}

const deleteBtn = (vm, h, currentRow, index) => {
  return('Tooltip', {
    props: {
      placement:'top',
      content:'删除'
    }
  },[h(delBtn,{
    on:{
      delclick:() => {
        console.info('delclick')
      }
    }
  })])
}

  export default {
    name: 'canEditTable',
    props: {
        refs: String,
        columnsList: Array,
        value: Array,
    },
    components: {
      delBtn,
      modifyBtn
    },
    data () {
        return {
            columns: [],
            thisTableData: [],
            edittingStore:[]
        };
    },
    methods: {
      init () {
            let vm = this;
            let editableCell = this.columnsList.filter(item => {
                if (item.editable) { // 判断存在
                    if (item.editable === true) { // 判断是否为真
                        return item;
                    }
                }
            });
            console.info(this.value)
            //let cloneData = JSON.parse(JSON.stringify(this.value)); // 深拷贝
            let cloneData = _.cloneDeep(this.value)

            let res = [];
            res = cloneData.map((item, index) => {
                let isEditting = false;
                if (this.thisTableData[index]) {
                    if (this.thisTableData[index].editting) {
                        isEditting = true;
                    } else {
                        for (const cell in this.thisTableData[index].edittingCell) {
                            if (this.thisTableData[index].edittingCell[cell] === true) {
                                isEditting = true;
                            }
                        }
                    }
                }
                if (isEditting) {
                    return this.thisTableData[index];
                } else {
                    this.$set(item, 'editting', false);
                    let edittingCell = {};
                    editableCell.forEach(item => {
                        edittingCell[item.key] = false;
                    });
                    this.$set(item, 'edittingCell', edittingCell);
                    return item;
                }
            });
            this.thisTableData = res;
            this.edittingStore = JSON.parse(JSON.stringify(this.thisTableData));
            this.columnsList.forEach(item => {
              if (item.handle) {
                  item.render = (h, param) => {
                      let currentRowData = this.thisTableData[param.index];
                      let children = [];
                      item.handle.forEach(item => {
                          if (item === 'edit') {
                              children.push(editBtn(this, h, currentRowData, param.index));
                          }else if(item === 'delete') {
                            children.push(deleteBtn(this, h, currentRowData, param.index))
                          }else if(item === 'detail') {
                            children.push(detailBtn(this, h, currentRowData, param.index))
                          }
                      });
                      return h('div', children);
                  };
              }
            });
        },
        
    },
    mounted () {
      this.init();
    },
    created () {
        
    },
    watch: {
        value (data) {
          this.thisTableData = data
          this.init();
        }
    }
  };
</script>
